<template>
	<!-- 关联医师的列表 -->
	<view>
		<view class="top_view">
			<view class="top_view_seach flex">
				<input type="text"  class="top_view_seach_left" v-model="keyword" placeholder="|请输入科室、医生名称" placeholder-style="color:#ccc"/>
				<view class="top_view_seach_right">
					搜索
				</view>
			</view>
			<view class="time flex1">
				<view class="time_left" @click="buxian">
					<view class="time_left_top">
						不限日期
					</view>
					<view class="time_left_active" v-show="tap_index == -1"></view>
				</view>
				<view class="tap flex">
					<view class="tap_item" v-for="(item,index) in tap_list" @click="choose_time(index)">
						<view :class="['tap_item_top',(tap_index == index || tap_index == -1)?'tap_item_top_active':'']">
							{{item.month}}.{{item.day}}
						</view>
						<view :class="['tap_item_bottom',(tap_index == index || tap_index == -1)?'tap_item_bottom_active':'']" v-if="index == 0">
							今日坐诊
						</view>
						<view :class="['tap_item_bottom',(tap_index == index || tap_index == -1)?'tap_item_bottom_active':'']" v-else>
							{{item.week}}坐诊
						</view>
						<view class="tap_item_active" v-show="tap_index == index"></view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll" :style="{height:scrollH+'px'}">
			<view class="list">
				<view class="list_item flex" v-for="(item,index) in list" @click="choose_coctor(index)">
					<view class="list_item_img_view">
						<image :src="ImgUrl + item.avatar" mode="" class="list_item_img_view_img"></image>
						<view class="list_item_img_view_zaixian flex1">
							<view class="list_item_img_view_zaixian_dian"></view>
							<view class="list_item_img_view_zaixian_text">
								{{item.is_online == 1?'在线':item.is_online == 0?'离线':'隐身'}}
							</view>
						</view>
					</view>
					<view class="list_item_right">
						<view class="list_item_right_top flex">
							<view class="list_item_right_top_left">
								{{item.name}}
							</view>
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/no_active.png" class="list_item_right_top_right" mode="" v-if="!item.active"></image>
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/active.png" class="list_item_right_top_right" mode="" v-else></image>
						</view>
						<view class="list_item_top_right_bottom flex1">
							<view class="list_item_top_right_bottom_item">
								{{item.level?item.level.name:''}}
							</view>
							<view class="list_item_top_right_bottom_tiao"></view>
							<view class="list_item_top_right_bottom_item">
								{{item.skilled}}
							</view>
							<view class="list_item_top_right_bottom_tiao"></view>
							<view class="list_item_top_right_bottom_item">
								{{item.hospital?item.hospital.name:''}}
							</view>
							<view class="jibie">
								{{item.hospital?item.hospital.level.name:''}}
							</view>
						</view>
						<view class="list_item_bottom flex">
							<view class="list_item_bottom_left">
								<u-rate size="14" :readonly="true" :count="count" v-model="rate" activeColor="#0165FB"></u-rate>
								<view class="list_item_bottom_left_bottom">
									月回答：625
								</view>
							</view>
							<view class="item_btn" @click="go_detail(item.id)">
								查看详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom" @click="submit">
			<view class="bottom_btn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import { doctor } from '../../api/login.js';
	import getScrollHeight from "@/utils/utils.js" //获取余下的高度
	export default {
		data() {
			return {
				data:{},
				count:5,
				rate:3,
				keyword:'',
				tap_index:-1,
				tap_list:[],
				scrollH:'',
				list:[
					{
						active:false,
					},
					{
						active:false,
					},
					{
						active:false,
					},
					{
						active:false,
					},
					{
						active:false,
					}
				],
				
			}
		},
		onLoad() {
			this.get_time()
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 80
			})	
		},
		computed:{
			ImgUrl(){
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		mounted() {
			this.getList();
		},
		methods: {
			submit(){
				let cpage = getCurrentPages()
				let page = cpage[cpage.length - 2]
				page.$vm.doctor_list.push(this.data);
				uni.navigateBack();
			},
			getList(){
				doctor().then(res=>{
					if(res.code == 200001){
						this.list = res.data.data;
					}
				})
			},
			go_detail(id){
				uni.navigateTo({
					url:'/pages/DoctorDetails/DoctorDetails?id=' + id
				})
			},
			get_time(){
				// 获取今天的日期
				let today = new Date();
				// 循环五次，每次增加一天
				for (var i = 0; i < 6; i++) {
				  // 使用getDate() 方法获取月份中的日期
				  var day = today.getDate();
				  // 使用getMonth() 方法获取月份（注意：月份从0开始，所以需要加1）
				  var month = today.getMonth() + 1;
				  // 使用getDay() 方法获取星期几（0 表示星期日，1 表示星期一，以此类推）
				  var dayOfWeek = today.getDay();
				  // 定义一个数组以便将星期几的数字转换为文本
				  var daysOfWeekText = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				  // 增加一天
				  today.setDate(today.getDate() + 1);
				   // 打印日期和星期几
				   console.log(month + "月" + day + "日 " + daysOfWeekText[dayOfWeek]);
				   let obj = {
					   month:month,
					   day:day,
					   week:daysOfWeekText[dayOfWeek]
				   }
				   this.tap_list.push(obj)
				}
			},
			buxian(){
				this.tap_index = -1
			},
			choose_time(index){
				this.tap_index = index
			},
			choose_coctor(index){
				console.log(index)
				this.$set(this.list[index],'active',!this.list[index].active)
				this.data = this.list[index]
			},
		}
	}
</script>

<style>
	page{
		background: #F4F4F4;
	}
.top_view{
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
}
.top_view_seach{
	width: 100%;
	height: 76rpx;
	border-radius: 40rpx;
	background: #F4F4F4;
	
}
.top_view_seach_left{
	width: calc(100% - 136rpx);
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	padding-left: 30rpx;
}
.top_view_seach_right{
	color: #FFF;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	width: 116rpx;
	height: 76rpx;
	line-height: 76rpx;
	border-radius: 40rpx;
	background:#0165FB;
}
.time{
	margin-top: 34rpx;
}
.time_left{
	width: 56rpx;
	color: #0165FB;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.time_left_top{
	margin-bottom: 24rpx;
}
.time_left_active{
	width: 56rpx;
	height: 4rpx;
	background-color: #0165FB;
	border-radius: 2rpx;
}
.tap{
	margin-left: 26rpx;
	width: calc(100% - 82rpx);
}
.tap_item_active{
	width: 56rpx;
	height: 4rpx;
	background-color: #0165FB;
	
	border-radius: 2rpx;
}
.tap_item_top{
	color: #BCBCBC;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 400;
	text-align: center;
}
.tap_item_bottom{
	color: #BCBCBC;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
	text-align: center;
	margin-bottom: 22rpx;
}
.tap_item_top_active{
	color: #333;
}
.tap_item_bottom_active{
	color: #E7980F;
}

.list_item{
	padding: 20rpx;
	box-sizing: border-box;
	background: #fff;
	margin-top: 20rpx;
}
.list_item_img_view{
	width: 146rpx;
	height: 174rpx;
	border-radius: 12rpx;
	background: #D9D9D9;
	position: relative;
}
.list_item_img_view_img{
	width: 146rpx;
	height: 174rpx;
	border-radius: 12rpx;
}
.list_item_img_view_zaixian{
	width: 80rpx;
	height: 40rpx;
	border-radius: 12rpx 0rpx;
	background: rgba(0, 0, 0, 0.40);
	position: absolute;
	bottom: 0;
	right: 0;
	justify-content: center;
}
.list_item_img_view_zaixian_dian{
	width: 14rpx;
	height: 14rpx;
	background: #31EC87;
	border-radius: 50%;
}
.list_item_img_view_zaixian_text{
	color: #FFF;
	font-family: Alibaba PuHuiTi;
	font-size: 20rpx;
	font-weight: 400;
	margin-left: 4rpx;
}
.list_item_right{
	width: calc(100% - 166rpx);
}
.list_item_right_top_left{
	color: #222;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 700;
}
.list_item_right_top_right{
	width: 40rpx;
	height: 40rpx;
}
.list_item_top_right_bottom{
		margin-top: 8rpx;
	}
	.list_item_top_right_bottom_tiao{
		width: 1rpx;
		height: 22rpx;
		background: #DFDFDF;
		margin: 0 12rpx;
	}
	.list_item_top_right_bottom_item{
		color: #444;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
	}
	.jibie{
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		background: linear-gradient(270deg, #FFF4EC 0%, #FFF3D9 98.44%);
		color: #E7980F;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		margin-left: 12rpx;
	}
	.list_item_bottom{
		margin-top: 14rpx;
	}
	.list_item_bottom_left_bottom{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 22rpx;
		font-weight: 400;
		margin-top: 14rpx;
	}
	.item_btn{
		width: 128rpx;
		height: 52rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		border-radius: 32rpx;
		text-align: center;
		line-height: 52rpx;
		background: linear-gradient(270deg, #0165FB 0%, #7AA7EB 100%);
	}
	.bottom{
		width: 100%;
		height: 140rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 30rpx;
		box-sizing: border-box
	}
	.bottom_btn{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 68rpx;
		background: #0165FB;
		margin-top: 20rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
	}
</style>
